<template>
	<view class="i-business-list" :style="[viewStyle]">
		<template v-if="option.layoutType == 1">
			<view class="layout_1 e-p-10" :style="[storeStyle]" v-for="(item, index) in storeList" :key="`${index}${item.id}`">
				<view class="e-flex overflow-hidd">
					<view class="e-rela e-m-r-20" v-if="option.showLogo">
						<load-image mode="aspectFill" :size="['148rpx']" :src="item.logo"></load-image>
						<view class="cell-count e-abso text-center c-white e-font-24" v-if="option.showStoreCellCount">
							{{ $t('layout.在售') }}{{ item.productCount || 0 }}{{ $t('classify.件') }}
						</view>
					</view>
					<view class="e-flex-1 e-m-r-40" style="height:148rpx">
						<!-- 这里应该是根据选择的商家变换的，暂时没有 -->
						<view class="e-line-1" v-if="option.showStroreName" :style="[{ color: option.titleColor }]">
							{{ item.name }}
						</view>
						<view class="e-line-1" v-if="option.showStoreScrib&&item.description" :style="[{ color: option.scribeColor }]">
							<text v-html="item.description"></text>
						</view>
						<view class="e-flex-1 e-m-t-40 e-line-1" v-if="option.showStoreAddr"
							:style="[{ color: option.addrColor }]">
							{{ item.licenseAddrDetail }}
						</view>
					</view>
					<view class="e-flex-xy-center">
						<view @tap="clickButton(item)" class="e-flex e-font-28 btn_1" :style="[{
								color: option.btnFColor,
								background: option.btnBgColor,
								borderRadius: px2rpx(option.btnRadius),
								border: `2rpx solid ${option.btnBorderColor}`
							}]">
							{{ option.btnText }}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="layout_2 e-p-10" :style="[storeStyle]" v-for="(item, index) in storeList" :key="`${index}${item.id}`">
				<view class="e-flex e-m-b-20">
					<load-image mode="aspectFill" :size="['76rpx']" :src="item.logo"></load-image>
					<view class="e-flex-1 e-m-l-10 e-m-r-10" style="height:76rpx">
						<view class="e-flex-1 e-font-26" v-if="option.showStroreName"
							:style="[{ color: option.titleColor }]">
							{{ item.name }}
						</view>
						<view class="e-font-24" v-if="option.showStoreScrib&&item.descriptio" :style="[{ color: option.scribeColor }]">
							<text v-html="item.description"></text>
						</view>
					</view>
					<view class="e-flex e-flex-between">
						<view class="e-flex e-font-28 btn_1" :style="[{
								color: option.btnFColor,
								background: option.btnBgColor,
								borderRadius: px2rpx(option.btnRadius),
								border: `2rpx solid ${option.btnBorderColor}`
							}]" @tap="clickButton(item)">
							{{ option.btnText }}
						</view>
					</view>
				</view>
				<scroll-view class="scroll" scroll-x="true">
					<view class="e-flex">
						<view class="e-m-r-12 goods" v-for="goods in item.goodsList" :key="goods.id"
							@tap="tapGoods(goods)">
							<load-image mode="aspectFill" :size="['192rpx']" :src="goods.coverImg"></load-image>
							<view class="e-p-10">
								<view class="e-font-24 goods-text e-line-2 "
									:style="[{ color: option.goodsNameColor }]">
									{{ goods.name }}
								</view>
								<view class="e-font-24  text-left" :style="[{ color: option.goodsPricebColor }]">
									<text class="e-font-24">{{ $unitEn }}</text>
									<text class="e-font-32">{{ goods.price }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import { useLayoutCompoments, useLayoutGoodsCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { px2rpx } from './utils'
	import { getGoodsList, postAddCollect } from '@/common/request/api'
	import type { GoodsItem } from '@/common/request/api'

	type StoreItem = {
		collectedCount : number
		description : string
		hasCollected : number
		hasCustomShare : number
		hasOwn : number
		id : string
		logo : string
		name : string
		productCount : number,
		licenseAddrDetail:string
		goodsList : GoodsItem[]
	}

	const props = withDefaults(defineProps<{
		option : {
			styleType : 0 | 1 | 2
			layoutType : 1 | 2
			storeList : StoreItem[]
			btnText : string
			showLogo : boolean
			showStroreName : boolean
			showStoreScrib : boolean
			showStoreAddr : boolean
			showStoreCellCount : boolean
			goodsNameColor : string,
			goodsPricebColor : string,
			goodsCount : number
			sort : number
			btnFColor : string
			btnBgColor : string,
			btnBorderColor : string
			linkType : 1 | 2 //1 进入店铺 2 关注店铺
			btnRadius : number
			componentBgColor : string
			titleColor : string
			scribeColor : string
			addrColor : string
			backgroundColor : string
			storeMargin : number
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number

		}
	}>(), {
		option: () => ({
			styleType: 0,
			layoutType: 1,
			storeList: [],
			btnText: "",
			showLogo: true,
			showStroreName: true,
			showStoreScrib: true,
			showStoreAddr: true,
			showStoreCellCount: true,
			goodsNameColor: "rgba(96, 98, 102, 1)",
			goodsPricebColor: "rgba(245, 34, 45, 1)",
			goodsCount: 10,
			sort: 1,
			btnFColor: "rgba(255, 255, 255, 1)",
			btnBgColor: "rgba(245, 34, 45, 1)",
			btnBorderColor: "rgba(245, 34, 45, 1)",
			linkType: 1,
			btnRadius: 12,
			componentBgColor: "rgba(255, 255, 255, 1)",
			titleColor: "rgba(48, 49, 51, 1)",
			scribeColor: "rgba(192, 196, 204, 1)",
			addrColor: "rgba(144, 147, 153, 1)",
			backgroundColor: '',
			storeMargin: 10,
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0
		})
	})
	
	const ctx = useCurrentInstance()
	
	const { viewStyle } = useLayoutCompoments(ctx, props.option)
	const {tapGoods} = useLayoutGoodsCompoments(ctx, props.option)
	
	const storeStyle = computed(() => {
		
			return {
				marginBottom: px2rpx(props.option.storeMargin),
				borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`,
				background: props.option.componentBgColor
			}
		
	})
	
	
	const clickButton = (item:StoreItem) => {
			// 跳转店铺详情
			if (props.option.linkType == 1) {
				ctx.$goTo('/pages/store/index',  { id: item.id })
			} else {
				// 收藏店铺
				postAddCollect({ targetId: item.id }, 2).then(() => {
					ctx.$toastApp(ctx.$t('store.已收藏'))
				})
			}
		}
	

	const storeList = ref(props.option.storeList)


	if (props.option.layoutType == 2) {
		props.option.storeList.forEach((item, index) => {
			getGoodsList({
				pageNum: 1,
				pageSize: 10,
				storeId: item.id
			}).then(res => {
				if (res.code == 200) {
					item.goodsList = res.rows
					storeList.value.splice(index, 1, item)
				}
			})
		})
	}


</script>
<style lang="scss" scoped>
	.btn_1 {
		padding: 0 14rpx;
	}

	.layout_1 {
		&:last-child {
			margin-bottom: 0 !important;
		}

		.cell-count {
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			bottom: 0;
			left: 0;
		}
	}


	.layout_2 {
		&:last-child {
			margin-bottom: 0 !important;
		}

		overflow: hidden;
	}

	.scroll {
		white-space: nowrap;
	}

	.goods {
		width: 192rpx;


		.goods-text {
			white-space: normal;
			height: 72rpx;
			line-height: 36rpx;
			margin-bottom: 2rpx;
		}
	}
</style>